import CommonModal from '@/components/CommonModal';
import { Form, Input, message, Radio } from 'antd';
import { useEffect, useState } from 'react';
import { getCurrentUser } from '@/utils/authority';
import Api from '../service';

//仓库名称规则
const rules = [
	{ required: true, message: '请输入仓库名称' },
	{ max: 20, message: '最多支持输入20个字符' },
]

//搜索菜单
const EditStorageModal = ({ item = {}, warehouseCount, handleOk, handleCancel }) => {

	//弹框显隐
	const [visible, setVisible] = useState(false);
	const [form] = Form.useForm();

	//初始化打开弹框
	useEffect(() => {
		setVisible(true);
	}, [])

	//弹框完全关闭
	const afterClose = () => {
		handleCancel();
	}

	//点击确定
	const onOk = () => {
		if(!item.id) {
			if(warehouseCount >= 5) {
				message.info('发货仓目前最多只允许新建5个');
				return;
			}
		}
		form.validateFields().then(async val => {
			const updateApi = item.id ? Api.updateStorageName : Api.addStorage;
			START_LOADING();
			const { success } = await updateApi({
				warehouseName: val.warehouseName,
				id: item.id,
				uuid: getCurrentUser().uuid,
			})
			END_LOADING();
			if (success) {
				message.success('操作成功！');
				handleOk();
			}
		}).catch(err => {
			console.log(err, 'errr')
		})
	}

	//点击取消
	const onCancel = () => {
		setVisible(false);
	}

	const title = item.id ? '编辑仓库' : '新建普通仓库';

	return (
		<CommonModal
			title={title}
			width="496px"
			visible={visible}
			onOk={onOk}
			onCancel={onCancel}
			afterClose={afterClose}
		>
			<Form name="edit-storage-modal" initialValues={{ warehouseName: item.warehouseName, kind: 1 }} form={form} autoComplete="off">
				{item.id ? null : <Form.Item label="仓库类型" name="kind"  required >
					<Radio.Group>
						<Radio value={1}>发货仓</Radio>
					</Radio.Group>
				</Form.Item>}
				<Form.Item label="仓库名称" name="warehouseName" rules={rules} >
					<Input placeholder='请输入菜单名称' />
				</Form.Item>
			</Form>
		</CommonModal>
	)
}

export default EditStorageModal;
